<template>
  <div class="menu-left">
    <template v-for="item in menuItem">
      <el-submenu
        :index="item.menu_code"
        :key="item.menu_code"
        v-if="item.children && item.children.length > 0"
      >
        <template slot="title">
          <i
            v-if="item.parent_code !== ''"
            :class="`iconfont ${item.icon}`"
            style="padding-right: 10px"
          ></i>
          <svg v-else aria-hidden="true">
            <use v-bind:xlink:href="`#${item.icon}`"></use>
          </svg>
          <span>{{ item.menu_name }}</span>
        </template>
        <el-menu-item-group>
          <menu-left :menuItem="item.children"></menu-left>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item
        :index="item.menu_code"
        :key="`${item.menu_code}`"
        :class="[
          itemMenuIsActive(item.menu_code),
          item.menu_code === 'main' ? 'main_tab' : '',
        ]"
        :route="{ name: item.menu_code }"
        v-else
      >
        <svg v-if="item.parent_code == ''" aria-hidden="true">
          <use v-bind:xlink:href="`#${item.icon}`"></use>
        </svg>
        <i v-else-if="item.icon" :class="`iconfont ${item.icon}`"></i>
        <span slot="title">{{ item.menu_name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "MenuLeft",
  props: ["menuItem"],
  methods: {
    itemMenuIsActive(menu_code) {
      const { fullPath } = this.$route;
      if (fullPath.includes(menu_code)) {
        return "is-active";
      } else {
        return "no-active";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-submenu {
  .el-submenu__title {
    height: 50px;
    line-height: 50px;
    color: #333;
    border-left: 2px solid transparent;
    .wfc-npm-permission-icon {
      color: #333;
    }
    i {
      transform: rotate(-90deg);
      color: #6a6a6a;
    }
    i.child {
      padding-right: 6px;
    }
    svg {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
    &:hover {
      background-color: transparent;
      color: #3c8cff;
      .wfc-npm-permission-icon {
        color: #3c8cff;
      }
      i {
        color: #3c8cff;
      }
    }
  }
  &.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    transform: rotate(0);
  }
  .el-menu-item-group__title {
    padding: 0 !important;
  }
}

/deep/ .el-menu-item {
  border-left: 2px solid transparent;
  height: 50px;
  line-height: 50px;
  &:focus {
    outline: 0;
    background-color: transparent;
  }
  &.is-active {
    &::before {
      content: "";
      width: 70%;
      height: 75%;
      position: absolute;
      top: 50%;
      transform: translate(-10%, -50%);
      background-color: rgba(76, 120, 252, 0.15);
      color: #4c78fc;
      border-radius: 30px;
    }
    i {
      color: #3c8cff;
    }
  }
  &.no-active {
    color: #333;
    &::before {
      width: 0;
      height: 0;
    }
    i {
      color: #333;
    }
  }
  i {
    color: #333;
    padding-right: 10px;
  }
  &:hover {
    outline: 0;
    background-color: transparent;
    color: #3c8cff;
    i {
      color: #3c8cff;
    }
  }
}
.wfc-menu-tooltip {
  padding: 8px 0;
}
</style>